<!--
 * @Author: 宋杰
 * @Date: 2020-12-25 20:19:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-13 15:13:12
 * @Description: 一家十一口(猜一字) 等级评估
-->
<template>
  <!-- 等级评估 -->
  <div class="divBox">
    <div class="div3">
      <div class="topBox3">
        <div class="topBox2">等级评估</div>
        <!-- <div class="topBox3_sou">
          <el-link type="primary">等级评估材料</el-link>
          <i class="iconfont iconxiazai"></i>
        </div> -->
      </div>

      <!-- con 还没有开始 -->
      <!-- <div class="conBox" v-if="show == false">
        <div class="imgBox1" @click="showClick">
          <img src="../../../static/img/xinjipinguhui.png" alt="" />
        </div>
      </div> -->

      <!-- con 开始评估了-->
      <div class="conBox">
        <div class="conBoxS" @click="showClick">
          <!-- 卡片 -->
          <div class="conBox3" v-for="(item, index) in dataList" :key="index">
            <div class="conBox3_con">
              <div class="conBox3_con_img">
                <img src="../../../static/img/MEDALS.png" alt="" />
              </div>
              <!-- 姓名 -->
              <div class="textconBox">
                <div class="nameBox">
                  <div class="el-icon-user"></div>
                  <div>{{ item.name }}</div>
                </div>
              </div>
              <div class="textbox">
                <span>有效期限</span><span>:</span
                ><span>{{ item.shijiankaishi }}-{{ item.shijianjieshu }}</span>
              </div>

              <div class="textbox2">
                <div>2020年培训机构星级评价</div>
              </div>

              <div class="conBox2">
                <div class="conBox2font">
                  2020年机构星级评估开始了，请大家在申请有效期限内申请评估，
                </div>
                <div class="conBox2font">此次评估标准如下：</div>
                <div class="conBox2font">1.机构章程要完善</div>
                <div class="conBox2font">2.机构办学地址要符合消防要求</div>
                <div class="conBox2font">3.机构教师人员要具备相关资质</div>
                <div class="btnBox" @click="denjipingu">开 始 评 估</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import basic from './login//basic'

export default {
  data() {
    return {
      show: true,
      activeName: "first",
      dataList: [
        {
          id: 0,
          name: "张嘉",
          shijiankaishi: "2020.3.10",
          shijianjieshu: "2020.10.16"
        },
        {
          id: 1,
          name: "赵文卓",
          shijiankaishi: "2020.3.20",
          shijianjieshu: "2020.8.10"
        },
        {
          id: 2,
          name: "欧阳娜娜",
          shijiankaishi: "2020.4.10",
          shijianjieshu: "2020.11.10"
        },
        {
          id: 3,
          name: "王有才",
          shijiankaishi: "2020.5.16",
          shijianjieshu: "2020.10.15"
        },
        {
          id: 4,
          name: "刘德华",
          shijiankaishi: "2020.7.18",
          shijianjieshu: "2020.12.11"
        }
      ]
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    showClick() {
      this.show = !this.show;
    },
    denjipingu() {
      this.$router.push({ name: "AnnualRatingAssessment" });
    }
  }
};
</script>
<style scoped>
.divBox {
  width: 100%;
  /* min-height: 100vh; */
  padding: 1% 5% 9% 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
  padding-top: 57px;
}
.div3 {
  /* position: relative; */
  background: #fff;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}
/* 等级评估材料 */
.topBox3_sou {
  color: #71b3f0;
  position: absolute;
  right: 0;
  margin-right: 7%;
}

.topBox3_sou >>> .el-icon-download:before {
  font-size: 14px;
}
.topBox3_sou >>> .el-link {
  text-decoration: none;
}
.topBox3_sou >>> .el-link:after {
  display: none !important;
}
.conBox {
  background: rgba(#fff, alpha);
  padding: 20px;
  width: 100%;
  min-height: 100%;
}
/* 盒子 */
.conBoxS {
  /* border: 1px solid rgb(228, 41, 41); */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* 开始评估 */
.conBox3 {
  width: 360px;
  height: 460px;
  background: rgba(#fff, alpha);
  border-radius: 20px;
  overflow: hidden;
  /* padding: 20px; */
  /* border: 1px solid #000;/ */
  box-shadow: 0px 0px 10px rgb(214, 214, 214);
  margin: 0 2% 20px 0;
  border: 1px solid transparent;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.conBox3_con {
  position: relative;
  z-index: 1;
  /* border: 1px solid rgb(235, 8, 8); */
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* 图片 */
.conBox3_con_img {
  /* border: 1px solid rgb(235, 8, 8); */
  position: absolute;
  top: -11%;
  z-index: -1;
  width: 70%;
  height: 57%;
}
.conBox3_con_img > img {
  width: 100%;
  height: 100%;
}
.textconBox {
  margin-top: 45%;
}
/* 姓名 */
.nameBox {
  min-width: 80px;
  height: 27px;
  position: relative;
  border: 1px solid #2276c3;
  border-radius: 13px;
  text-align: center;
  margin-bottom: 14px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.nameBox >>> .el-icon-user {
  position: absolute;
  left: -1px;
  top: -1px;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #2276c3 !important;
  border: 1px solid #2276c3;
  background: #ffffff;
}
.nameBox >:nth-child(2) {
  padding-left: 30px;
  padding-right: 10px;
  flex: 1;
  /* text-align: right; */
}
.conBox2font {
  font-size: 8px;
}
.textbox2 {
  font-size: 20px;
  line-height: 24px;
  margin: 6px auto;
  position: relative;
}
.textbox2::after,
.textbox2::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 25px;
  height: 2px;
}
.textbox2:before {
  left: -30px; /*调整背景横线的左右距离*/
  background:linear-gradient(to left,#494949,#fafafa);
}
.textbox2:after {
  right: -30px;
  background:linear-gradient(to right,#494949,#fafafa);
}
/* 内容 */
.conBox2 {
  /* border: 1px solid red; */
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 24px;
  background: #faf8f8;
}
/* 开始评估按钮 */
.btnBox {
  height: 30px;
  width: 140px;
  margin: 20px auto;
  border: 1px solid #e89324;
  border-radius: 14px;
  /* background: #e89324; */
  color: #e89324;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
/* 鼠标移入改变样式 */

.conBox3:hover .nameBox {
  /* border: 1px solid rgb(241, 49, 49); */
  background: #2276c3 !important;
  color: #fff !important;
}
.conBox3:hover .btnBox {
  /* border: 1px solid rgb(241, 49, 49); */
  background: #e89324 !important;
  color: #fff !important;
}
.conBox3:hover .textbox2 {
  color: #e89324 !important;
}
.conBox3:hover .textbox2:before {
  left: -30px; /*调整背景横线的左右距离*/
  background:linear-gradient(to left,#e89324,#fafafa) !important;
}
.conBox3:hover .textbox2:after {
  right: -30px;
  background:linear-gradient(to right,#e89324,#fafafa) !important;
}
/* 鼠标移入改变样式 end */
.kaishibut {
  position: absolute;
  bottom: -20px;
  left: calc(50% - 65px);
  width: 130px;
  height: 40px;
  border-radius: 20px;
  z-index: 100;
  color: #ff9c23;
  font-size: 16px;
  font-weight: bold;
  border: none;
  background-image: linear-gradient(to right, #fff4cb, #ffe78f);
  box-shadow: 0px 0px 10px #cacaca;
}
.kaishibut:focus {
  outline: none;
}

.topBox2 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h1-bg.png) no-repeat;
    /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}
</style>
